<template>
  <div class="message-custom-tip-box">
    <template v-if="type === 'card'">
      <MessageCustomTipCard :content="tipContent" />
    </template>
    <template v-else-if="type === 'topbar'">
      <MessageCustomTipTop :content="tipContent" />
    </template>
    <template v-else>
      <MessageCustomTipHighlight :content="tipContent" />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watchEffect } from '@/TUIKit/adapter-vue'
import { JSONToObject } from '@/TUIKit/utils/index'

// DC: 自定义消息卡片
import MessageCustomTipHighlight from '@/TUIWidget/message-custom/message-custom-tip-highlight'
import MessageCustomTipCard from '@/TUIWidget/message-custom/message-custom-tip-card'
import MessageCustomTipTop from '@/TUIWidget/message-custom/message-custom-tip-top'

const props = defineProps({
  content: {
    type: Object,
    default: () => ({}),
  },
})
const tipContent = ref({})
const type = ref('')

watchEffect(() => {
  const { payload } = props.content
  tipContent.value = JSONToObject(payload.data)
  type.value = tipContent.value?.type || ''
})
</script>

<style lang="scss" scoped>
// .message-custom-tip-box {
//   position: relative;
// }</style>
